<template>
	<view class="container">
		
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/children_bg.png') +')'}">
			<view class="info">
				 <view class="name">童行逐梦成长</view>
				 <view class="font-24 c-base">伴童成长 童梦起航<text style="color: #ffffff;">「成长正当时」</text></view>
			</view>
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="goBack()"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#ffffff"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>
		 
		<view class="flex-between m-24 rel" style="margin-top: -220rpx;">
			<view class="butler" :style="{backgroundImage: 'url('+ $util.img('image/children_1.png') +')'}" @click="goTo1('/otherpages/children/list')">
				<view class="font-32  text-bold">四点半课堂</view>
				<view class="font-24 c-78">课后陪伴，家长省心！</view>
			</view>
			<view class="butler" :style="{backgroundImage: 'url('+ $util.img('image/children_2.png') +')'}" @click="makePhone()">
				<view class="font-32  text-bold">平台客服</view>
				<view class="font-24 c-78" >为您解疑答惑</view>
			</view>
		</view>
		
		<view class="main rel">
			<view class="boxPanel flex" v-for="(item,index) in goodsCategory" :key="index" @click="goGoodsList(item)">
				<image :src="$util.img(item.image)" mode="aspectFill" class="icon" lazy-load></image>
				  <view class="flex-1 flex-column">
					<view class="text-bold">{{item.category_name}}</view>
					<view class="font-24  c-89">{{item.description}}</view>
				  </view>
				<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
			</view>
			<view class="boxPanel flex" v-for="(item,index) in list" :key="index" @click="goTo(item)">
				<image :src="$util.img(item.icon)" mode="aspectFill" class="icon" lazy-load></image>
				  <view class="flex-1 flex-column">
					<view class="text-bold">{{item.title}}</view>
					<view class="font-24  c-89">{{item.sub_title}}</view>
				  </view>
				<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
			</view>
		</view>
		
		<!-- 进群弹窗 -->
		<chat-group :show="showGroup" @close="closePop" v-if="showGroup" ></chat-group>
		<!-- 登录 -->
		<login-pop ref="loginDialog"></login-pop>
	</view>
</template>

<script>
	import chatGroup from '../../components/chatGroup/chatGroup.vue'
	export default {
		components:{
			chatGroup
		},
		data() {
			return {
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				list: [],
				showGroup: false,
				goodsCategory: [],

			}
		},
		onLoad(data) {
			if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
			this.getIndex()
			this.getGoodsCategory()
		},
		methods: {
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			goGoodsList(item) {
				this.$util.redirectTo('/otherpages/children/goodsList?category_id='+item.category_id+'&category_name='+item.category_name)
			},
			goTo(item) {
				this.$util.redirectTo('/otherpages/children/description?id='+item.article_id)
			},
			goTo1(url) {
				this.$util.redirectTo(url)
			},
			closePop() {
				this.showGroup = false;
			},
			getIndex() {
				this.$api.sendRequest({
			      url: "/api/child/articlelist",
			      data: {
			        page: 1,
			      },
			      success: res => {
			        if(res.code == 0) {
						this.list = res.data.list;
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			getGoodsCategory() {
				this.$api.sendRequest({
			      url: "/api/child/categorylists",
			      data: {},
			      success: res => {
			        if(res.code == 0) {
						this.goodsCategory = res.data;
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			makePhone() {
				let siteInfo = uni.getStorageSync('siteInfo') || {};
				uni.makePhoneCall({
					phoneNumber: siteInfo.site_tel
				})
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
.bg {
	width: 750rpx;
	height: 484rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
	.info {
		text-align: left;
		padding: 200rpx 30rpx 0 30rpx;
		.name {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
			color: #fff;
		}
	}
}
.butler {
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
	width: 379rpx;
	height: 293rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
}
.boxPanel {
	.icon {
	  width: 104rpx;
	  height: 104rpx;
	  margin-right: 20rpx;
	}
	
}
</style>
